<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div class="row">
		<div class="col-lg-12">
			<h2>JVM监控项</h2>
		</div>
</div>
<!--/.row-->
<div class="row">
	<div class="col-xs-6 col-md-6">
		<div id="jvmHeapStatChart" style="height: 300px;"></div>
		<!-- <div class="panel panel-default">
			<div class="panel-body">
				<div id="jvmMemStatChart" style="height: 300px;"></div>
			</div>
		</div> -->
	</div>
	<div class="col-xs-6 col-md-6">
		<div id="jvmCpuStatChart" style="height: 300px;"></div>
		<!-- <div class="panel panel-default">
			<div class="panel-body">
				<div id="jvmCpuStatChart" style="height: 300px;"></div>
			</div>
		</div> -->
	</div>
</div>
<!--/.row-->
<script type="text/javascript">

var jvmMonitor = {
	
	ticket: -1,
	
	cpuStatChart: {},
	cpuStatOpts: ['used'],
	cpuStatSeriesData: [],
	
	heapStatChart: {},
	heapStatSeriesData: [],
	
	date1: [],
	date2: [],
	loopCount: 0,
	
	initJvmMonitorCharts: function() {
		var me = this;
		me.initJvmCpuStatChart();
		me.initJvmHeapStatChart();
	},
	
	initJvmCpuStatChart: function() {
		// 初始化echarts图表
		var me = this;
		
		me.cpuStatChart = echarts.init(document.getElementById('jvmCpuStatChart'));

		var curDate = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

		var option = {
			title : {
				text : 'CPU占用率'
			},
			tooltip : {
				trigger : 'axis'
			},
			legend : {
				data : [ 'used' ]
			},
			calculable : false,
			xAxis : [ {
				type : 'category',
				boundaryGap : false,
				data : [ curDate ]
			} ],
			yAxis : [ {
				type : 'value',
				min : 0,
				max : 100,
				axisLabel : {
					formatter : '{value}%'
				}
			} ],
			series : [ {
				name : 'used',
				type : 'line',
				smooth : true,
				/*itemStyle: {
				    normal: {
				        areaStyle: {type: 'default'}
				    }
				},*/
				data : [ 0 ]
			} ]
		};
		
		// 为echarts对象加载数据 
		me.cpuStatChart.setOption(option);
	},
	
	initJvmHeapStatChart: function() {
		// 初始化echarts图表
		
		var me = this;
		me.heapStatChart = echarts.init(document.getElementById('jvmHeapStatChart'));

		var curDate = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

		var option = {
			title : {
				text : 'Heap'
			},
			tooltip : {
				trigger : 'axis'
			},
			legend : {
				data : [ 'used' ]
			},
			calculable : false,
			xAxis : [ {
				type : 'category',
				boundaryGap : false,
				data : [ curDate ]
			} ],
			yAxis : [ {
				type : 'value',
				min : 0,
				axisLabel : {
					formatter : '{value}MB'
				}
			} ],
			series : [ {
				name : 'used',
				type : 'line',
				smooth : true,
				itemStyle: {
				    normal: {
				        areaStyle: {type: 'default'}
				    }
				},
				data : [ 0 ]
			}]
		};
		
		// 为echarts初始化加载数据 
		me.heapStatChart.setOption(option);
	},
	
	drawJvmCpuStatChart: function(cpuStat) {
		var me = this;
		var date = me.date1;
		var seriesData = me.cpuStatSeriesData;
		var opts = me.cpuStatOpts;
		
		if(me.loopCount == 0) {
			for (var i = 0; i < opts.length; i++) {
				seriesData[opts[i]] = [];
			}
		}
		
		function prepareCpuStatData(shift, cpuStat) {
			if (shift) {
				if(date.length > 10) {
					date.shift();
					for (var i = 0; i < opts.length; i++) {
						seriesData[opts[i]].shift();
					}
				}
			}
			date.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));
			for (var i = 0; i < opts.length; i++) {
				seriesData[opts[i]].push(cpuStat[opts[i]]);
			}
		}
		
		prepareCpuStatData(true, cpuStat);
		me.cpuStatChart.setOption({
			xAxis : {
				data : date
			},
			series : [ {
				name: 'used',
				data: seriesData['used']
			} ]
		});
	},
	
	drawJvmHeapStatChart: function(heapStat) {
		var me = this;
		var date = me.date2;
		var seriesData = me.heapStatSeriesData;
		var opts = [ 'used' ];

		if(me.loopCount == 0) {
			for (var i = 0; i < opts.length; i++) {
				seriesData[opts[i]] = [];
			}
		}
		
		function formatHeapStatVal(val) {
			var _val = (val / (1024 * 1024)).toFixed(0);
			return _val;
		};
		
		function prepareHeapStatData(shift, heapStat) {
			if (shift) {
				if(date.length > 10) {
					date.shift();
					for (var i = 0; i < opts.length; i++) {
						seriesData[opts[i]].shift();
					}
				}
			}
			date.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));
			for (var i = 0; i < opts.length; i++) {
				seriesData[opts[i]].push(formatHeapStatVal(heapStat[opts[i]]));
			}
		}

			
		prepareHeapStatData(false, heapStat);
		
		me.heapStatChart.setOption({
			xAxis : {
				data : date
			},
			yAxis: {
				min: 0,
				max: formatHeapStatVal(heapStat.total)
			},
			series : [ {
				name : 'used',
				data : seriesData['used']
			}]
		});
	},
	
	drawJvmMonitorCharts : function() {
		
		var period = 3000;
		
		interval.clear(jvmMonitor.ticket);
		
		jvmMonitor.ticket = interval.make(function() {
			
			$.get('monitor/jvminfo', function(resp){
				if(resp.success) {
					var row =  resp.row;
					var cpuStat = row.cpuStat;
					var heapStat = row.heapStat;
					// 实时更新cpu监控图
					jvmMonitor.drawJvmCpuStatChart(cpuStat);
					// 实时更新heap监控图
					jvmMonitor.drawJvmHeapStatChart(heapStat);
					
					jvmMonitor.loopCount++;
				}
			});
			
		}, period);
		
	}
	
};


$(document).ready(function() {
	
	// 初始化监控图
	jvmMonitor.initJvmMonitorCharts();
	
});
</script>